<template>
  <!--
    查：
      1：定义api
      2:导入
      3：进入页面就调用
      4：存储数据并渲染
          数据转换
          将普通数据转换成树形结构？
    增：
      1：创建使用弹框组件
      2：完成表单处理，包括表单验证
      3：定义新增api
      4:导入
      5：在表单验证通过后调用
      6：调用成功：
         a:提示一下
         b:关闭弹框
         c:清空表单数据
         d:父级列表刷新
    删：
      1：点击删除按钮弹出确认框
      2：定义删除api
      3:导入
      4：点击确定框的确定后调用删除api
      5:调用成功
           提示
           刷新列表数据
    改：
      需求：共用新增弹框组件
            标题要改
            数据要回显
            表单验证要调整
            确定时要分场景调用接口
      实现：
          1：点击编辑打开弹框组件
          2：新增组件内加入一个变量用于区分场景 mode="add/edit"
          3:点击打开弹框时，修改mode的值
          4：调整标题
          5：处理数据回显
          6：调整表单验证
          7：定义编辑api
          8:导入
          9：分场景调用接口api
          调用完成：
             a:提示
             b:关闭弹框
             c:清空表单数据与验证
             d:刷新父级列表数据
 -->

  <div class="departments">
    <el-card>
      <div class="main">
        <TreeItem :item="topInfo" />
        <el-tree
          style="margin-top: 20px"
          :data="list"
          :props="{ label: 'name' }"
        >
          <template v-slot="{ data }">
            <TreeItem :item="data" style="width: 100%" @getData="getData" />
          </template>
        </el-tree>
      </div>
    </el-card>
    <!-- 新增部门弹框组件 -->
    <Add :init-list="initList" @getData="getData" />
  </div>
</template>

<script>
import { companyDepartment } from '@/api/departments'
import TreeItem from './components/treeItem.vue'
import Add from './components/add'
export default {
  components: {
    TreeItem,
    Add
  },
  data() {
    return {
      initList: [],
      list: [],
      topInfo: {
        name: '传智教育',
        manager: '负责人',
        isTop: true,
        id: ''
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    // 获取组织架构列表
    async getData() {
      const res = await companyDepartment()
      this.initList = res.data.depts
      this.list = this.changeData(res.data.depts, '')
      console.log('获取组织架构列表', res)
    },
    // 树形数据转换
    changeData(arr, pid) {
      return arr.filter((item) => {
        if (item.pid === pid) {
          item.children = this.changeData(arr, item.id)
          return true
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.departments {
  padding: 20px;
  .main {
    width: 80%;
    margin: 50px auto 0;
  }
}
</style>
